window.addEventListener("load", function () {
	//功能二:API次数p标签框动态渲染
	//1.获取后台数据,对数据进行遍历
	const apiData = [
		{times: 4000, price: 1200, unitPrice: 0.3000},
		{times: 8000, price: 2000,unitPrice:0.2500 },
		{times: 40000,price: 8000, unitPrice: 0.2000}
	   ];
	   //2.遍历时拼接为html结构
	   //3.将html结构放入指定位置
	   apiData.forEach(function(v){
			$(".gray-word").innerHTML+=`<p data-price=${v.price} data-unitprice=${v.unitPrice}>${v.times}次</p>`;
	   });
	   //页面加载时默认显示的内容
	   //给默认的第一个增加样式
	   $(".gray-word p")[0].classList.add("active")
	   //默认显示第一个的价格内容
	   $(".red-word").innerHTML=`<strong>&yen;${$(".gray-word p")[0].dataset.price}</strong>
	   (约${$(".gray-word p")[0].dataset.unitprice}元/次),仅限企业实名购买`;
	   
	//功能一:点击p标签区增加激活样式
	// 1.获取相关节点$(".gray-word p")
	
	$(".gray-word p").forEach(function(v){
		//2.绑定点击事件
		v.addEventListener("click",function(){
			//用classList是否包含defailt判断
			if(!this.classList.contains("defailt")){
				//3.先排他,清除p的所有激活样式
				$(".gray-word p").forEach(function(item){
					item.classList.remove("active");
				});
			}
			//4.再添加激活样式
			this .classList.add("active");
			// 功能三:点击p标签区,在下方联动生成对应的价格数据
			$(".red-word").innerHTML=`<strong>&yen;${this.dataset.price}</strong>
			(约${this.dataset.unitprice}元/次),仅限企业实名购买`;
		});

	});
	//功能四:点击tap栏激活对应样式
	//1.获取相关节点
	// $("#tablist li")
	//2.给每个li绑定点击事件(遍历)
	$("#content-left div")[0].classList.add("on")

	$("#tabList li").forEach(function(v ,i){
		v.addEventListener("click",function(){
			//3.排他,移除所有激活样式
			$("#tabList li").forEach(function(item,index){
				item.classList.remove("active");
				$("#content-left div")[index].classList.remove("on");
			});
			//4.再添加激活样式
			this.classList.add("active");
			//功能五:点击tap显示对应内容
			//1.获取相关节点$("#content-left div")
			//2.让所有卡片消失
			//3.点击li通过对应索引显示对应的卡片内容
			$("#content-left div")[i].classList.add("on");
		})
	})









	//配置banner区粒子界面
	const config = {
		selector: "#bannerBg",
		vx: 4, //点x轴速度,正为右，负为左
		vy: 4, //点y轴速度
		height: 2, //点高宽，其实为正方形，所以不宜太大
		width: 2,
		count: 100, //点个数
		color: "#4f4f4f", //点颜色
		stroke: "168, 168, 168", //线条颜色
		dist: 6000, //点吸附距离
		e_dist: 20000, //鼠标吸附加速距离
		max_conn: 10, //点到点最大连接数
	};
	//调用
	CanvasParticle(config);















	//功能三:回到顶部
	// 思路:1.获取相关节点
	$("#goback");
	//滚动条
	// Window.addEventListener("scroll",function(){
	// 	console.log(Window.scrollY);

	// })
	//2.绑定点击事件
	$("#goback").addEventListener("click", function () {
		window.scrollTo({ left: 0, top: 0, behavior: "smooth" });
	});
});
